<template>
    <div id="container">
        <div id="viewDiv"></div>
        <div style="left:15px;top:15px;position:absolute;background-color:rgba(255,255,255,0.85);z-index:10;width:460px;height:280px;border-radius:5px"></div>
        <el-main style="left:15px;top:15px;position:absolute;box-shadow:0 0 5px gray;z-index:11;width:460px;height:280px;border-radius:5px">
            <span style="display:block;font-size:18px;width:100%;margin-bottom:10px;"><b>符号调整工具</b></span>
            <div style="width:100%;display:flex;flex-direction:row;align-items: center;line-height:45px;">
                <span>符号颜色调整:&nbsp;&nbsp;&nbsp;</span>
                <el-color-picker color-format='rgb' v-model="color_value" :show-alpha="true" 
                :predefine="predefineColors" @change="color_change" ></el-color-picker>
                <span style="margin-left:30px;">边线颜色调整:&nbsp;&nbsp;&nbsp;</span>
                <el-color-picker color-format='rgb' v-model="color_value_边线" :show-alpha="true" 
                :predefine="predefineColors" @change="color_change_边线" ></el-color-picker>
            </div>
            <div style="width:100%;display:flex;flex-direction:row;align-items: center;line-height:45px;">
                <span>符号大小调整:&nbsp;&nbsp;&nbsp;</span>
                <el-slider style="width:300px;" :min="5" :max="25" v-model="符号大小" @input="符号大小调整"></el-slider>
            </div>
            <div style="width:100%;display:flex;flex-direction:row;align-items: center;line-height:45px;">
                <span>边线宽度调整:&nbsp;&nbsp;&nbsp;</span>
                <el-slider :step="0.1" style="width:300px;" :min="0.1" :max="2" v-model="边线宽度" @input="边线宽度调整"></el-slider>
            </div>
            <div style="width:100%;display:flex;flex-direction:row;align-items: center;line-height:45px;">
                <span>风格调整:&nbsp;&nbsp;&nbsp;</span>
                <el-radio-group v-model="符号风格" @change="符号风格调整">
                    <el-radio-button value="circle">圆形</el-radio-button>
                    <el-radio-button value="cross">十字形</el-radio-button>
                    <el-radio-button value="square">方形</el-radio-button>
                    <el-radio-button value="triangle">三角形</el-radio-button>
                    <el-radio-button value="x">交叉形</el-radio-button>
                </el-radio-group>
            </div>
        </el-main>
    </div>
</template>

<script setup>
import * as 天地图 from '../天地图'
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import MapView from '@arcgis/core/views/MapView'
var map,view,要素图层
const 符号大小=ref(12)
const 符号风格=ref('circle')
const color_value=ref('rgba(200,50,50,1)')//双向绑定变量,控制填充颜色
const color_value_边线=ref('rgba(100,100,100,1)')
const predefineColors = ref([//提供默认颜色
  '#ff4500','#ff8c00','#ffd700', '#90ee90','#00ced1', '#1e90ff', '#c71585',
])
var color_change=()=>{
    要素图层.renderer.symbol.color=color_value.value
    要素图层.labelingInfo[0].symbol.color=color_value.value
}
var color_change_边线=()=>{
    要素图层.renderer.symbol.outline.color=color_value_边线.value
    要素图层.labelingInfo[0].symbol.haloColor=color_value_边线.value
}
var 符号大小调整=()=>{
    要素图层.renderer.symbol.size=符号大小.value
}
const 边线宽度=ref(1)
var 边线宽度调整=()=>{
    要素图层.renderer.symbol.outline.width=边线宽度.value
}
var 符号风格调整=()=>{
    要素图层.renderer.symbol.style=符号风格.value
}
要素图层=new FeatureLayer({
    url:"https://ws8575.club/web/rest/services/Hosted/要素图层发布测试_前端渲染测试_3857/FeatureServer/0",
    renderer:{
        type:"simple",
        symbol:{ 
            type:"simple-marker",
            color:[200,50,50],
            size:15,
            outline:{
                color:[100,100,100],
                width:1
            }
        }
    },
    labelingInfo:[{
        labelExpressionInfo: {
            expression: "$feature.name" // arcade,也可以value:"{Mountain_Peak}"
        },
        symbol: {
            type: "text", 
            font: {
                size: 12,
            },
            color: "red",//设置字体颜色
            haloColor:[100,100,100],//晕圈颜色
            haloSize:0.4,//晕圈尺寸
        },
        minScale:100000,
        labelPlacement:"center-right",
    }]
})
map=new Map({
    basemap:{
        baseLayers:天地图.天地图矢量_无标注
    },
    layers: [要素图层]
})
onMounted(()=>{
view = new MapView({
    map: map,  container: "viewDiv",
    center:[120.4,36.1],zoom:15,
    constraints:{
        minScale:500000,
        maxScale:1300,
        rotationEnabled:false
    },
})
view.ui.remove(["zoom","attribution"])

})//onMounted()结尾
</script>

<style scoped>
#viewDiv,#container{
height:100%;width:100%;padding:0;margin:0;
}
span{
    white-space: pre-line;
    color:rgb(100,100,100)
}
</style>
  